import { useState, useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import Form from '@/components/Form'
import FormButtonRow from '@/components/Form/FormButtonRow'
import { Button, MessagePlugin } from 'tdesign-react'
import '../index.less'

const LoginForm = () => {

  const navigate = useNavigate()
  const formRef = useRef(null)

  const formOptions = [
    {
      type: 'input',
      formProps: {
        initialData: 'admin',
        label: '用户名',
        name: 'username',
      },
      itemProps: {
        placeholder: '',
      }
    },
    {
      type: 'input',
      formProps: {
        initialData: 'admin',
        label: '密码',
        name: 'password',
      },
      itemProps: {
        placeholder: '',
      }
    },
  ]

  const onLogin = () => {
    const formData = formRef.current ? (formRef.current as any).getFormData() : {}
    if (formData.username == 'admin' && formData.password == 'admin') {
      MessagePlugin.success({ content: '登录成功', placement: 'top-right', duration: 2000 })
      navigate('/aio/home')
    }
  }

  const FooterButton = () => {
    return <Button className='aio-form-button-submit' onClick={onLogin}>登录</Button>
  }

  return <div className='login-form'>
    <Form ref={formRef} formOptions={formOptions} />
    <FormButtonRow formButton={FooterButton()} />
  </div>
}

export default LoginForm
